<script type="text/javascript">

var Arrays=new Array();

function itemclickevent(){
	$('#wrap li').click(function(){
		
		var thisID = $(this).attr('id');
		
		var itemname  = $(this).find('div .name').html();
		var itemprice = $(this).find('div .price').html();
			
		if(include(Arrays,thisID))
		{
			var price 	 = $('#each-'+thisID).children(".shopp-price").find('em').html();
			var quantity = $('#each-'+thisID).children(".shopp-quantity").html();
			quantity = parseInt(quantity)+parseInt(1);
			
			var total = parseInt(itemprice)*parseInt(quantity);
			
			$('#each-'+thisID).children(".shopp-price").find('em').html(total);
			$('#each-'+thisID).children(".shopp-quantity").html(quantity);
			
			var prev_charges = $('.cart-total span').html();
			prev_charges = parseInt(prev_charges)-parseInt(price);
			
			prev_charges = parseInt(prev_charges)+parseInt(total);
			$('.cart-total span').html(prev_charges);
			
			$('#total-hidden-charges').val(prev_charges);

			var data='&id='+thisID+'&name='+itemname+'&price='+itemprice+'&count='+quantity;
			
			$.ajax({
			    url: '../additem',
			    data: data,
			    type: 'POST',
			    success: function(data){
			    	$.jGrowl("Item added to cart.!");
			    }
			});
		}
		else
		{
			Arrays.push(thisID);
			
			var prev_charges = $('.cart-total span').html();
			prev_charges = parseInt(prev_charges)+parseInt(itemprice);
			
			$('.cart-total span').html(prev_charges);
			$('#total-hidden-charges').val(prev_charges);
			
			$('#left_bar .cart-info').append('<div class="shopp" id="each-'+thisID+'"><div class="label">'+itemname+'</div><div class="shopp-price"> $<em>'+itemprice+'</em></div><span class="shopp-quantity">1</span><img src="../../../assets/img/remove.png" class="remove" /><br class="all" /></div>');
			
			$('#cart').css({'-webkit-transform' : 'rotate(20deg)','-moz-transform' : 'rotate(20deg)' });

			var data='&id='+thisID+'&name='+itemname+'&price='+itemprice+'&count=1';
			
			$.ajax({
			    url: '../additem',
			    data: data,
			    type: 'POST',
			    success: function(data){
			    	$.jGrowl("Item added to cart.!");
			    }
			});

		}
		
		setTimeout('angle()',200);
	});	

	$('.remove').livequery('click', function() {
		
		var deduct = $(this).parent().children(".shopp-price").find('em').html();
		var prev_charges = $('.cart-total span').html();
		
		var thisID = $(this).parent().attr('id').replace('each-','');
		
		var pos = getpos(Arrays,thisID);
		Arrays.splice(pos,1,"0")
		
		prev_charges = parseInt(prev_charges)-parseInt(deduct);
		$('.cart-total span').html(prev_charges);
		$('#total-hidden-charges').val(prev_charges);
		$(this).parent().remove();

		var data='&id='+thisID;
		$.ajax({
		    url: '../delitem',
		    data: data,
		    type: 'POST',
		    success: function(data){
		    	$.jGrowl("Item deleted from cart.!");
		    }
		});	
		
	});	
}

$(document).ready(function() {
	


	//Load items for sale
	var datastring='&catid='+<?php echo $catid;?>;
	$.ajax({
		type: "POST",
		url: "../../xmlrpc_client/get_all_items_by_cat",
		dataType:'json',
		data: datastring,
		success:function(data){
			var text='';
			$.each(data,function(key,val){
				$.each(val,function(key,val){
					text=text+'<li id="'+val["Product Id"]+'"><img src="../../../assets/img/books2.png" height="100"'+
					'alt="" /> <br clear="all" />'+
					'<div>'+
					'<span class="name">'+val["Product Name"]+'</span><br>$<span class="price">'+val["Price"]+'</span>'+
					'</div>'+
					'</li>';
				});

				$('#itemsul').html(text);

				itemclickevent();
				
			});
		}
	});

	//Load existing items.
	$.getJSON('../getitems', function(data) {
		$.each(data,function(key,val){
			
			Arrays.push(val.id);

			var prev_charges = $('.cart-total span').html();

			var total = parseInt(val.count)*parseInt(val.price);
			prev_charges = parseInt(prev_charges)+parseInt(total);
			
			$('.cart-total span').html(prev_charges);
			$('#total-hidden-charges').val(prev_charges);
			
			$('#left_bar .cart-info').append('<div class="shopp" id="each-'+val.id+'"><div class="label">'+val.name+'</div><div class="shopp-price"> $<em>'+val.price+'</em></div><span class="shopp-quantity">'+val.count+'</span><img src="../../../assets/img/remove.png" class="remove" /><br class="all" /></div>');
			
			$('#cart').css({'-webkit-transform' : 'rotate(20deg)','-moz-transform' : 'rotate(20deg)' });
		});
	});
	
	$('#wrap li').mousemove(function(){
		
		var position = $(this).position();
		
		$('#cart').stop().animate({
																									
				left   : position.left+'px',
				
			},250,function(){
			
		});			
	}).mouseout(function(){
		
	});	
	
	
});

function include(arr, obj) {
  for(var i=0; i<arr.length; i++) {
    if (arr[i] == obj) return true;
  }
}
function getpos(arr, obj) {
  for(var i=0; i<arr.length; i++) {
    if (arr[i] == obj) return i;
  }
}
function angle(){$('#cart').css({'-webkit-transform' : 'rotate(0deg)','-moz-transform' : 'rotate(0deg)' });}

</script>
</head>

<body>

	<div align="left">

		<div id="wrap" align="left">

			<ul id="itemsul">
				<li id="R1"><img src="../../../assets/img/books2.png" height="100"
					alt="" /> <br clear="all" />
					<div>
						<span class="name">Effective Java</span><br>$<span class="price">95</span>
					</div>
				</li>
				<li id="R2"><img src="../../../assets/img/books.png" class="items"
					height="100" alt="" /> <br clear="all" />
					<div>
						<span class="name">Software Design</span> $<span class="price">102
						</span>
					</div>
				</li>
				<li id="R3"><img src="../../../assets/img/books2.png" class="items"
					height="100" alt="" /> <br clear="all" />
					<div>
						<span class="name">The bazaar</span> $<span class="price">22</span>
					</div>
				</li>

				<li id="R4"><img src="../../../assets/img/books.png" class="items"
					height="100" alt="" /> <br clear="all" />
					<div>
						<span class="name">Linux Cook Book</span> $<span class="price">10
						</span>
					</div>
				</li>

			</ul>

			<br clear="all" />

			<!-- <div id="bottomBar" align="left"><img src="carts.png" id="cart" /></div> -->

		</div>

		<div id="left_bar">

			<form action="checkout" id="cart_form" name="cart_form" method="POST">

				<div class="cart-info"></div>

				<div class="cart-total">

					<b>Total
						Charges:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b>
					$<span>0</span> <input type="hidden" name="total-hidden-charges"
						id="total-hidden-charges" value="0" />
				</div>

				<button type="submit" id="Submit">CheckOut</button>

			</form>

		</div>



	</div>